<template>
  <div id="regional-overview">
    <div class="row row-1"></div>
    <div class="row row-2">
      <div class="declare">
        <p class="ellipsis">区域概况</p>
      </div>
    </div>
    <div class="row row-3">
      <p>
        长安区是河北省会石家庄市的中心城区之一，位于石家庄市区东北部，东接藁城区，西邻新华区，南以裕华东路、中山东路中心线，分别与裕华区、桥西区接壤，北至滹沱河，是石家庄市人民政府、市政协机关所在地。
      </p>
      <p>
        长安区总面积138.31平方千米，常住人口82.71万人，辖4个镇12个街道办事处，共有8个行政村，162个社区居委会。空气质量监测国控点位有人民会堂与二十二中南校区。
      </p>
      <p>
        长安区有石家庄长安公园、河北省博物馆等景点。长安区还是省会商业最发达的地区，以中山东路为中心，各大型商业中心为省会再添繁华。
      </p>
    </div>
    <div class="row row-4">
      <div class="swiper">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide slide-1">
              <img
                src="../../assets/img/index/20200606153349.jpg"
                alt=""
                width="218"
                height="200"
              />
            </div>
            <div class="swiper-slide slide-2">
              <img
                src="../../assets/img/index/20200606153355.jpg"
                alt=""
                width="218"
                height="200"
              />
            </div>
            <div class="swiper-slide slide-3">
              <img
                src="../../assets/img/index/20200606153401.jpg"
                alt=""
                width="218"
                height="200"
              />
            </div>
            <div class="swiper-slide slide-4">
              <img
                src="../../assets/img/index/20200606153408.jpg"
                alt=""
                width="218"
                height="200"
              />
            </div>
            <div class="swiper-slide slide-5">
              <img
                src="../../assets/img/index/20200606153413.jpg"
                alt=""
                width="218"
                height="200"
              />
            </div>
            <div class="swiper-slide slide-6">
              <img
                src="../../assets/img/index/20200606153647.jpg"
                alt=""
                width="218"
                height="200"
              />
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "swiper/css/swiper.css";
import swiper from "swiper";

export default {
  methods: {
    initSwiper() {
      new swiper(".swiper-container", {
        slidesPerView: 3,
        slidesPerGroup: 1,
        loop: true,
        autoplay: true,
        delay: 1000,
        pagination: {
          el: ".swiper-pagination"
        },
        effect: "coverflow",
        centeredSlides: true,
        coverflowEffect: {
          rotate: 30,
          stretch: 10,
          depth: 60,
          modifier: 2,
          slideShadows: true
        }
      });
    }
  },
  mounted() {
    this.initSwiper();
  }
};
</script>

<style lang="stylus" scoped>
#regional-overview
  position relative
  width 100%
  height 100%

  > .row-1
    height 80px

  > .row-2
    padding 30px 0

    > .declare
      margin 0 auto

  > .row-3
    padding 30px 0

    > p
      text-align justify
      line-height 50px
      text-indent 2em
      font-size 23px
      color #fff

  > .row-4
    padding-top 60px

    > .swiper
      position relative
      width 690px
      height 222px
      margin 0 auto
      padding 30px 11px 6px 5px
      background url("../../assets/img/index/crouselBac.png") no-repeat top left
      background-size 706px 257px

      > .swiper-container
        position relative
        width 675px
        height 200px

        > .swiper-wrapper
          > .swiper-slide
            height 200px

            > img
              margin 0 auto
</style>
